<nz-divider></nz-divider>
<nz-breadcrumb>
  <nz-breadcrumb-item>
    <a [routerLink]="['/']">
      <i nz-icon nzType="home"></i>
      <span>{{ 'menu.dashboard' | i18n }}</span>
    </a>
  </nz-breadcrumb-item>
  <nz-breadcrumb-item>
    <i nz-icon nzType="tags"></i>
    <span>{{ 'menu.extras.tags' | i18n }}</span>
    <a href="https://hertzbeat.com/docs/help/alert_threshold" target="_blank" style="float: right; margin-right: 5%">
      <button nz-button nzType="primary">
        <span>{{ 'common.button.help' | i18n }} </span>
        <span nz-icon nzType="question-circle"></span>
      </button>
    </a>
  </nz-breadcrumb-item>
</nz-breadcrumb>
<nz-divider></nz-divider>

<div style="margin-bottom: 20px">
  <button nz-button nzType="primary" nz-tooltip (click)="sync()" [nzTooltipTitle]="'common.refresh' | i18n">
    <i nz-icon nzType="sync" nzTheme="outline"></i>
  </button>
  <button nz-button nzType="primary" (click)="onNewTag()">
    <i nz-icon nzType="appstore-add" nzTheme="outline"></i>
    {{ 'tag.new' | i18n }}
  </button>

  <button nz-button nzType="primary" nzDanger (click)="onDeleteTags()">
    <i nz-icon nzType="delete" nzTheme="outline"></i>
    {{ 'tag.delete' | i18n }}
  </button>

  <button style="margin-right: 25px; float: right" nz-button nzType="primary" (click)="loadTagsTable()">
    {{ 'common.search' | i18n }}
  </button>
  <input
    style="margin-right: 5px; float: right; width: 300px; border-radius: 9px; text-align: center"
    nz-input
    type="text"
    [placeholder]="'tag.search' | i18n"
    nzSize="default"
    (keyup.enter)="loadTagsTable()"
    [(ngModel)]="search"
  />
</div>

<nz-table
  #fixedTable
  [nzData]="tags"
  [nzPageIndex]="pageIndex"
  [nzPageSize]="pageSize"
  [nzTotal]="total"
  nzFrontPagination="false"
  [nzLoading]="tableLoading"
  nzShowSizeChanger
  [nzShowTotal]="rangeTemplate"
  [nzPageSizeOptions]="[8, 15, 25]"
  (nzQueryParams)="onTablePageChange($event)"
  nzShowPagination="true"
  [nzScroll]="{ x: '1150px', y: '1240px' }"
>
  <thead>
    <tr>
      <th nzAlign="center" nzLeft nzWidth="4%" [(nzChecked)]="checkedAll" (nzCheckedChange)="onAllChecked($event)"></th>
      <th nzAlign="center">{{ 'tag.name' | i18n }}</th>
      <th nzAlign="center">{{ 'tag.value' | i18n }}</th>
      <th nzAlign="center">{{ 'tag.color' | i18n }}</th>
      <th nzAlign="center">{{ 'tag.display' | i18n }}</th>
      <th nzAlign="center">{{ 'tag.update-time' | i18n }}</th>
      <th nzAlign="center">{{ 'common.edit' | i18n }}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let data of fixedTable.data">
      <td nzAlign="center" nzLeft [nzChecked]="checkedTagIds.has(data.id)" (nzCheckedChange)="onItemChecked(data.id, $event)"></td>
      <td nzAlign="center">{{ data.name }}</td>
      <td nzAlign="center">{{ data.value }}</td>
      <td nzAlign="center">
        <nz-tag [nzColor]="data.color">{{ data.color }}</nz-tag>
      </td>
      <td nzAlign="center">
        <nz-tag *ngIf="data.value == undefined || data.value.trim() == ''" [nzColor]="data.color">{{ data.name }}</nz-tag>
        <nz-tag *ngIf="data.value != undefined && data.value.trim() != ''" [nzColor]="data.color">{{
          data.name + ':' + data.value
        }}</nz-tag>
      </td>
      <td nzAlign="center">{{ data.gmtUpdate | date: 'YYYY-MM-dd HH:mm:ss' }}</td>
      <td nzAlign="center">
        <button nz-button nzType="primary" (click)="onEditOneTag(data)" nz-tooltip [nzTooltipTitle]="'tag.edit' | i18n">
          <i nz-icon nzType="edit" nzTheme="outline"></i>
        </button>
        <button nz-button nzType="primary" nzDanger (click)="onDeleteOneTag(data.id)" nz-tooltip [nzTooltipTitle]="'tag.delete' | i18n">
          <i nz-icon nzType="delete" nzTheme="outline"></i>
        </button>
      </td>
    </tr>
  </tbody>
</nz-table>

<ng-template #rangeTemplate> {{ 'common.total' | i18n }} {{ total }} </ng-template>

<!-- 新增或修改TAG弹出框 -->
<nz-modal
  [(nzVisible)]="isManageModalVisible"
  [nzTitle]="isManageModalAdd ? ('tag.new' | i18n) : ('tag.edit' | i18n)"
  (nzOnCancel)="onManageModalCancel()"
  (nzOnOk)="onManageModalOk()"
  nzMaskClosable="false"
  nzWidth="30%"
  [nzOkLoading]="isManageModalOkLoading"
>
  <div *nzModalContent class="-inner-content">
    <form nz-form #tagForm="ngForm">
      <nz-form-item>
        <nz-form-label [nzSpan]="7" nzFor="name" nzRequired="true">{{ 'tag.name' | i18n }}</nz-form-label>
        <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
          <input [(ngModel)]="tag.name" nz-input required name="name" type="text" id="name" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSpan]="7" nzFor="value">{{ 'tag.value' | i18n }}</nz-form-label>
        <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
          <input [(ngModel)]="tag.value" nz-input name="value" type="text" id="value" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSpan]="7" nzFor="color">{{ 'tag.color' | i18n }}</nz-form-label>
        <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
          <input
            [(colorPicker)]="tag.color"
            cpFallbackColor="#64d3ca"
            cpOutputFormat="hex"
            [style.background]="tag.color"
            required
            style="border-radius: 25px"
            name="color"
            id="color"
          />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item *ngIf="tag.name != undefined">
        <nz-form-label [nzSpan]="7" nzFor="color">{{ 'tag.display' | i18n }}</nz-form-label>
        <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
          <nz-tag *ngIf="tag.value == undefined || tag.value.trim() == ''" [nzColor]="tag.color">{{ tag.name }}</nz-tag>
          <nz-tag *ngIf="tag.value != undefined && tag.value.trim() != ''" [nzColor]="tag.color">{{ tag.name + ':' + tag.value }}</nz-tag>
        </nz-form-control>
      </nz-form-item>
    </form>
  </div>
</nz-modal>
